<template>
  <div class="not-online">
    <div class="total">
      <el-row :gutter="20">
        <el-col :span="6"> 终端名称 </el-col>
        <el-col :span="6"> IP地址 </el-col>
        <el-col :span="5"> 责任人 </el-col>
        <el-col :span="3"> 位置 </el-col>
        <el-col :span="3"> 离线天数 </el-col>
      </el-row>
    </div>
    <div class="details">
        <el-row :gutter="20" v-for="(item, index) in lists">
          <el-tooltip class="item" effect="dark" :content="item.name ? item.name : '-'" placement="top-start">
          <el-col class="box-ellipsis" :span="6"> {{ item.name ? item.name : "-" }} </el-col>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="item.ip ? item.ip : '-'" placement="top-start">
          <el-col class="box-ellipsis" :span="6"> {{ item.ip ? item.ip : "-" }} </el-col>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="item.userName ? item.userName : '-'" placement="top-start">
          <el-col class="box-ellipsis" :span="5"> {{ item.userName ? item.userName : "-" }} </el-col>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="item.storage ? item.storage : '-'" placement="top-start">
          <el-col class="box-ellipsis" :span="3"> {{ item.storage ? item.storage : "-" }} </el-col>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="item.days ? JSON.stringify(item.days) : '-'" placement="top-start">
          <el-col class="box-ellipsis" :span="3"> {{ item.days ? item.days : "-" }} </el-col>
          </el-tooltip>
        </el-row>
    </div>
  </div>
</template>

<script>
import CycleComponent from "../common/cycleComponent.vue";

export default {
  components: { CycleComponent },
  data() {
    return {};
  },
  props: {
    lists: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.box-ellipsis{
  display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.not-online {
  width: 100%;
  height: 100%;
  padding: 10px 0 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .total {
    width: 100%;
    background: rgba(59, 139, 255, 0.1);
    border-radius: 4px;
    padding: 10px;
  }
  .details {
    flex: 1;
    width: 100%;
    padding: 0;
    overflow: hidden;

    .el-row {
      margin-left: 0 !important;
      margin-bottom: 6px;
      width: 100%;
      padding: 8px 0;
      border-bottom: 1px solid rgba(59, 139, 255, 0.4);
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  .el-col {
    text-align: left;
    white-space: nowrap;
  }
  img {
    height: 2.5remx;
    width: 2.5rem;
    vertical-align: middle;
    margin: 0 5px 0 10px;
  }
  .fs-sm {
    font-family: SourceHanSansCN-Regular;
    font-size: 1rem;
    color: #bfd9ff;
    font-weight: 400;
  }
}
// ::v-deep {
//   .cycle-single:nth-of-type(2) {
//     .el-row {
//       &:nth-of-type(2n + 1) {
//         background: rgba(59, 139, 255, 0.2);
//       }
//       &:nth-of-type(2n){
//         background: transparent;
//       }
//     }
//   }
// }
</style>
